<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../img/asset-favico.ico">
    <title>传智健康</title>
    <link rel="stylesheet" href="../css/page-health-index.css"/>
    <link rel="stylesheet" href="../css/page-health-login.css"/>
    <link rel="stylesheet" href="../plugins/elementui/index.css"/>
    <script src="../plugins/jquery/dist/jquery.min.js"></script>
    <script src="../plugins/healthmobile.js"></script>
    <script src="../plugins/vue/vue.js"></script>
    <script src="../plugins/vue/axios-0.18.0.js"></script>
    <script src="../plugins/elementui/index.js"></script>
</head>
<body data-spy="scroll" data-target="#myNavbar" data-offset="150">
<div class="app">
    <!-- 页面头部 -->
    <div class="top-header">
        <span class="f-left"><i class="icon-back" onclick="history.go(-1)"></i></span>
        <span class="center">传智健康</span>
        <span class="f-right"><i class="icon-more"></i></span>
    </div>
    <div class="carousel">
        <div class="banner-roll">
            <div class="banner-item">
                <div class="item" style="background-image: url(../img/widget-banner_01.png);"><img
                        src="../img/widget-banner_01.png" alt=""></div>
                <div class="item" style="background-image: url(../img/widget-banner_02.png);"><img
                        src="../img/widget-banner_02.png" alt=""></div>
                <div class="item" style="background-image: url(../img/widget-banner_03.png);"><img
                        src="../img/widget-banner_03.png" alt=""></div>
            </div>
            <div class="indicators"></div>
        </div>
    </div>
    <!-- 页面内容 -->
    <div class="contentBox">
        <div class="list-column2">
            <ul class="list">
                <li class="type-item">
                    <a href="/pages/setmeal_list.html" class="link-page">
                        <div class="type-title">
                            <h3>体检预约</h3>
                            <p>实时预约</p>
                        </div>
                        <div class="type-icon">
                            <i class="icon-zhen">
                                <span class="path1"></span><span class="path2"></span>
                            </i>
                        </div>
                    </a>
                </li>
                <li class="type-item">
                    <a href="/pages/checkrecord_list.html" class="link-page">
                        <div class="type-title">
                            <h3>报告查询</h3>
                            <p>一键查询</p>
                        </div>
                        <div class="type-icon">
                            <i class="icon-search"><span class="path1"></span><span class="path2"></span><span
                                    class="path3"></span><span class="path4"></span></i>
                        </div>
                    </a>
                </li>
                <li class="type-item">
                    <a href="health-risk.html" class="link-page">
                        <div class="type-title">
                            <h3>健康评估</h3>
                            <p>了解自身健康</p>
                        </div>
                        <div class="type-icon">
                            <i class="icon-star"><span class="path1"></span><span class="path2"></span></i>
                        </div>
                    </a>
                </li>
                <li class="type-item">
                    <a href="health-intervention.html" class="link-page">
                        <div class="type-title">
                            <h3>健康干预</h3>
                            <p>采集状况</p>
                        </div>
                        <div class="type-icon">
                            <i class="icon-plus"><span class="path1"></span><span class="path2"></span></i>
                        </div>
                    </a>
                </li>
                <li class="type-item">
                    <a href="health-record.html" class="link-page">
                        <div class="type-title">
                            <h3>健康档案</h3>
                            <p>掌上查询</p>
                        </div>
                        <div class="type-icon">
                            <i class="icon-record"><span class="path1"></span><span class="path2"></span><span
                                    class="path3"></span><span class="path4"></span><span class="path5"></span></i>
                        </div>
                    </a>
                </li>
                <li class="type-item">
                    <a href="health-information.html" class="link-page">
                        <div class="type-title">
                            <h3>健康咨询</h3>
                            <p>咨询一览</p>
                        </div>
                        <div class="type-icon">
                            <i class="icon-person"><span class="path1"></span><span class="path2"></span></i>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="img-parent">
            <img src="../img/asset-ad.png" width="100%" height="100%"/>
        </div>
    </div>
</div>
<script>
    $(function () {
        var ht = $('.banner-item').find('img').eq(0).height()
        var tg = $('.banner-item .item');
        var num = 0;
        for (i = 0; i < tg.length; i++) {
            $('.indicators').append('<span></span>');
            $('.indicators').find('span').eq(num).addClass('active');
        }
        $(".banner-item,.banner-roll").css('height', ht)

        function roll() {
            tg.eq(num).animate({
                'opacity': '1',
                'z-index': num
            }, 2000).siblings().animate({
                'opacity': '0',
                'z-index': 0
            }, 2000);
            $('.indicators').find('span').eq(num).addClass('active').siblings().removeClass('active');
            if (num >= tg.length - 1) {
                num = 0;
            } else {
                num++;
            }
        }

        $('.indicators').find('span').click(function () {
            num = $(this).index();
            roll();
        });
        var timer = setInterval(roll, 3000);
        $('.banner-item').mouseover(function () {
            clearInterval(timer)
        });
        $('.banner-item').mouseout(function () {
            timer = setInterval(roll, 3000)
        });
    })
    $(window).resize(function () {
        var ht = $('.banner-item').find('img').eq(0).height()
        $(".banner-item,.banner-roll").css('height', ht)
    });
</script>
<script src="../plugins/vue/vue.js"></script>
<script src="../plugins/vue/axios-0.18.0.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        mounted() {
            //发送ajax请求，获取所有的套餐数据，赋值给setmealList模型数据，用于页面展示
            axios.get("/setmeal/generateHtml.do").then((res) => {

            });
        }
    });
</script>
</body>
</html>